import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from '@/common/layer';
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import jquery from 'jquery';

class Delookprog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            saleid: '',
            salereason: '',
            prolist: '',
            secondlist: [],
            loantype: ['房押', '车押', '信用贷', '保单贷', '公积金贷'],
        }
    }

    componentDidMount() {
        this.getprog(util.getQuery().apply)//查询进度：apply
        this.getsecond(util.getQuery().id)//查询二次补充：id

        //限制textarea字数
        jquery("textarea").on('keyup', function () {
            var val = jquery("textarea").val()
            // jquery("#textNum").text(val.length)
            if (val.length >= 50) {
                jquery("textarea").val(val.substring(0, 50))
                layer.open({
                    content: "文字超出了",
                    btn: "知道了"
                })
            }
        })
    }

    // 获取报单处理进度
    async getprog(apply) {
        let res = await util.rjax({
            url: '/otherProductStatus/getProductStatusById?id=' + apply,
            type: "get"
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            this.setState({ prolist: res.data })
        }
    }

    // 获取二次提交信息
    async getsecond(id) {
        let res = await util.rjax({
            url: '/productUpdate/getListById?id=' + id,
            type: "get"
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            if (res.data.rows.length == 0) {
                jquery(".secondsend").hide()
            } else {
                this.setState({ secondlist: res.data.rows })
            }
        }
    }

    // 取消
    async cancel(text) {//取消报单：id
        let res = await util.rjax({
            url: '/otherProductStatus/cancel?id=' + util.getQuery().id + "&saleReason=" + text,
            type: "post"
        })
        if (res) {
            this.setState({ salereason: '' })
            layer.open({
                content: res.msg,
                btn: '好的',
                yes: function () {
                    window.location.href = `./defbsale.html`;
                }
            })
        }
    }

    //点击yes
    async yesbtn() {
        var text = jquery("textarea").val()
        if (jquery("textarea").val() == '') {
            layer.open({ content: "取消原因不能为空", btn: "好的" })
        } else {
            this.cancel(text)
            jquery(".dialogcancel").hide()
        }
    }

    //点击no
    async nobtn() {
        jquery(".dialogcancel").hide()
    }
    //取消报单
    async cancelshow() {
        jquery(".dialogcancel").show()
    }

    render() {
        let secondlist = this.state.secondlist.map((item, index) => {
            return (
                <div className="stateList secondsend" key={index}>
                    <p className="state">第{index + 1}次提交信息</p>
                    <div className="referrtime">
                        <div className="flexbox">
                            <div className="flex">
                                <span className="l">贷款类型</span>
                                <span className="right">{this.state.loantype[item.productType]}</span>
                            </div>
                            <div className="flex">
                                <span className="l">贷款产品</span>
                                <span className="right">{item.productName}</span>
                            </div>
                            <div className="flex">
                                <span className="l">钉钉完善资料时间</span>
                                <span className="right">{item.submitTime}</span>
                            </div>
                        </div>
                    </div>
                </div>
            )
        })

        return (
            <div>
                <div className="lookprog">
                    <div className="stateList">
                        <p className="state">收到报单日期</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.firstExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.firstExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.firstRealTime}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.firstRemark ? this.state.prolist.firstRemark : null}</span></p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">销售提交材料</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.secondExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.secondExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.secondRealTime}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.secondRemark ? this.state.prolist.secondRemark : null}</span></p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">销售提供居间合同</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.thirdExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.thirdExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.thirdRealTime}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.thirdRemark ? this.state.prolist.thirdRemark : null}</span></p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方材料审核反馈</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.fourthExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.fourthExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.fourthRealTime}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.fourthRemark}</span></p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方实际操作签约等</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.fifthExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.fifthExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.fifthRealTime}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.fifthRemark}</span></p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方放款</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prolist.sixthExceptTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prolist.sixthExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prolist.sixthRealTime}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">下款额</span>
                                    <span className="r">{this.state.prolist.loanEnd}</span>
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark"><span>{this.state.prolist.sixthRemark}</span></p>
                        </div>
                    </div>
                    {/* <div className="stateList secondsend">
                        <p className="state">二次提交信息补充</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">贷款类型</span>
                                    <span className="right">{this.state.secondlist}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">贷款产品</span>
                                    <span className="right">{this.state.secondlist}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">钉钉完善资料时间</span>
                                    <span className="right">{this.state.secondlist}</span>
                                </div>
                            </div>
                        </div>
                    </div> */}
                    <div>
                        {secondlist}
                    </div>
                    <div className="cancel">
                        <span onClick={this.cancelshow.bind(this)}>取消报单</span>
                    </div>
                </div>

                <div className="dialogcancel">
                    <div className="iscancelbox">
                        <span className="canceltip">取消原因</span>
                        <textarea maxLength="50" name="" placeholder="文字不超过50个字" id="" cols="" rows=""></textarea>
                        <p>
                            <span className="no" onClick={this.nobtn.bind(this)}>取消</span>
                            <i></i>
                            <span className="yes" onClick={this.yesbtn.bind(this)}>提交</span>
                        </p>
                    </div>
                </div>
            </div>

        )
    }
}

ReactDom.render(<Delookprog />, document.getElementById("app"));